import { Routes, Route, useLocation, useNavigate } from "react-router-dom";
import Index from '../home/index'
import Test from '../home/test';
import { TabBar, NavBar } from 'antd-mobile';
import {
    AppOutline,
    UnorderedListOutline,
} from 'antd-mobile-icons'
export default function Login() {
    const navigate = useNavigate();
    const location = useLocation()
    const { pathname } = location
    const setRouteActive = (value) => {
        //history.push(value)
        console.log(value);
        navigate(value, { replace: true })
    }

    const tabs = [
        {
            key: '/index',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/test',
            title: '待办',
            icon: <UnorderedListOutline />,
        }
    ]

    return (
        <div className="App">
            {/* 登录页面
            <NavLink to='/index'>首页</NavLink>
            <NavLink to='/test'>test页面</NavLink> */}
            <div>
                <NavBar>标题</NavBar>
            </div>
            <div className="">
                <Routes location="/index">
                    <Route path="*" element={<div />} />
                    <Route path="/index" element={<Index />}></Route>
                    <Route path="/test" element={<Test />}></Route>
                </Routes>
            </div>
            <div className="">
                <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </div>
    );
}